<template>
    <div class="app-container calendar-list-container" v-loading="loading" element-loading-text="正在导出数据">
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-input
            clearable
            v-model="listQuery.jobNumber"
            :style="searchInputStyle"
            class="filter-item"
            placeholder="员工工号"
      ></el-input>
      <el-input
            clearable
            v-model="listQuery.workCenter"
            :style="searchInputStyle"
            class="filter-item"
            placeholder="部门"
      ></el-input>
      <el-date-picker
            v-model="listQuery.year"
            type="year"
            placeholder="年份"
            :style="searchInputStyle"
            class="filter-item"
            value-format="yyyy"
            format="yyyy">
        </el-date-picker>

        <el-date-picker
            v-model="listQuery.month"
            type="month"
            placeholder="月份"
            :style="searchInputStyle"
            class="filter-item"
            value-format="MM"
            format="MM">
        </el-date-picker>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>

    <!-- table 表格 -->
    <el-table height="700px" :data="tableInfo" v-loading="loadingList" element-loading-text="给我一首歌的时间" stripe border fit highlight-current-row style="width: 100%">
      <el-table-column  label="序号" type="index" align="center" width="80px"/>
      <el-table-column label="部门" prop="workCenter" align="center"/>
      <el-table-column label="班组" prop="sectionType" align="center"/>
      <el-table-column label="姓名" prop="userName" align="center"/>
      <el-table-column  label="员工工号" prop='jobNumber' align="center"/>
      <el-table-column  label="day1" prop='day1' align="center"/>
      <el-table-column  label="day2" prop='day2' align="center"/>
      <el-table-column  label="day3" prop='day3' align="center"/>
      <el-table-column  label="day4" prop='day4' align="center"/>
      <el-table-column  label="day5" prop='day5' align="center"/>
      <el-table-column  label="day6" prop='day6' align="center"/>
      <el-table-column  label="day7" prop='day7' align="center"/>
      <el-table-column  label="day8" prop='day8' align="center"/>
      <el-table-column  label="day9" prop='day9' align="center"/>
      <el-table-column  label="day10" prop='day10' align="center"/>
      <el-table-column  label="day11" prop='day11' align="center"/>
      <el-table-column  label="day12" prop='day12' align="center"/>
      <el-table-column  label="day13" prop='day13' align="center"/>
      <el-table-column  label="day14" prop='day14' align="center"/>
      <el-table-column  label="day15" prop='day15' align="center"/>
      <el-table-column  label="day16" prop='day16' align="center"/>
      <el-table-column  label="day17" prop='day17' align="center"/>
      <el-table-column  label="day18" prop='day18' align="center"/>
      <el-table-column  label="day19" prop='day19' align="center"/>
      <el-table-column  label="day20" prop='day20' align="center"/>
      <el-table-column  label="day21" prop='day21' align="center"/>
      <el-table-column  label="day22" prop='day22' align="center"/>
      <el-table-column  label="day23" prop='day23' align="center"/>
      <el-table-column  label="day24" prop='day24' align="center"/>
      <el-table-column  label="day25" prop='day25' align="center"/>
      <el-table-column  label="day26" prop='day26' align="center"/>
      <el-table-column  label="day27" prop='day27' align="center"/>
      <el-table-column  label="day28" prop='day28' align="center"/>
      <el-table-column  label="day29" prop='day29' align="center"/>
      <el-table-column  label="day30" prop='day30' align="center"/>
      <el-table-column  label="day31" prop='day31' align="center"/>
      <el-table-column  label="出勤天数" prop='timeSum' align="center"/>
    </el-table>

   <!-- pagination 分页 -->
    <!-- <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40, 100, 300, 500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div> -->

    <el-divider></el-divider>

    <el-button style="margin-right: 10px" type="success" size="small" @click="hExportExcel">导出数据Excel</el-button>
    <el-button type="success" size="small" @click="getExcelList">下载Excel模板</el-button>
    <el-divider></el-divider>

    <!-- 上传Excel表单 -->
    <el-upload
        class="upload-demo"
        ref="upload"
        :action="baseURL+'/user-time/UserTimeExcel'"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :on-error="handleError"
        :headers="httpHeader"
        :file-list="fileList"
        :show-file-list="showfilelist"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">1、选取正班出勤数据文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" :loading="uploadLoading">{{uploadTip}}</el-button>
        <div slot="tip" class="el-upload__tip">将Excel表单从此处上传到服务器</div>
    </el-upload>

  </div>
</template>

<script>
import { findUserTime } from "@/api/performance"
import { baseURL } from '@/utils/baseURL'
import { getToken } from '@/utils/auth'
export default {
    name: 'check_problem',
    data () {
        return {
            baseURL: baseURL,
            listQuery: {},
            searchInputStyle: 'width: 150px;margin-right:15px;',
            total: 0,                                      //数据的总数
            tableInfo: [],
            loadingList: false,
            userInfo: this.$store.state.user.userInfo,
            httpHeader: {
                'Authorization': ''
            },
            showfilelist: true,
            uploadLoading: false,
            uploadTip:'2、上传到服务器',
        }
    },
    methods: {
          // 下载模板表单
        getExcelList() {
          window.open('http://180.76.113.62:8110/image/portrait/example1.rar')
          },
        submitUpload() {
            this.uploadLoading = true
            this.uploadTip = '正在上传中'
            this.showfilelist = false
            // this.httpHeader.Authorization = this.dealCookie(document.cookie)
            this.httpHeader.Authorization = getToken()
            this.$refs.upload.submit()

        },
        handleError(){
            this.uploadLoading = false
            this.showfilelist = true
            this.uploadTip = '上传到服务器'
            this.$message({
                type: 'error',
                message: '上传失败!'
            })
        },
        handleSuccess(response) {
            console.log(response,'response')
            const result = response.code
            const errMsg = response.msg
            this.uploadLoading = false
            this.showfilelist = true
            this.uploadTip = '上传到服务器'
            this.$refs['upload'].clearFiles()
                if(result == '1'){
                    this.$message({
                    type: 'succes',
                    message: errMsg
                })
                this.handleFilter()
                }else{
                    this.$message({
                    type: 'error',
                    message: errMsg
                })
            }
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        async handleFilter() {
            this.loadingList = true
            let query = Object.assign({},this.listQuery)
            if(!query.jobNumber){ delete query.jobNumber }
            let data = await findUserTime(query)
            if(data.code == '500') return
            if(data.code != '1') return this.$message.error(data.msg)
            this.tableInfo = data.data?data.data:[]
            this.loadingList = false
        },
        // table表单下方的页码组件改变每页显示的数据条数
        handleSizeChange(val) {
          this.listQuery.limit = val
          this.handleFilter()
        },
        // table表单下方的页码组件改变页面
        handleCurrentChange(val) {
          this.listQuery.page = val
          this.handleFilter()
        },
        transformDat(res) {
          const mapInfo = {
            index: '序号',
            workCenter: '部门',
            sectionType: '班组',
            userName: '姓名',
            jobNumber: '员工工号',
            day1: 'day1',
            day2: 'day2',
            day3: 'day3',
            day4: 'day4',
            day5: 'day5',
            day6: 'day6',
            day7: 'day7',
            day8: 'day8',
            day9: 'day9',
            day10: 'day10',
            day11: 'day11',
            day12: 'day12',
            day13: 'day13',
            day14: 'day14',
            day15: 'day15',
            day16: 'day16',
            day17: 'day17',
            day18: 'day18',
            day19: 'day19',
            day20: 'day20',
            day21: 'day21',
            day22: 'day22',
            day23: 'day23',
            day24: 'day24',
            day25: 'day25',
            day26: 'day26',
            day27: 'day27',
            day28: 'day28',
            day29: 'day29',
            day30: 'day30',
            day31: 'day31',
            timeSum: '出勤天数'
          }
          // 对data进行格式化
          // 取出所有的属性名
          const props = Object.keys(res[0]) // ['id','']
          // 将属性名从英文转为中文
          const header = props.map(zhkey => mapInfo[zhkey])
          console.log('中文的表头', header)
          // const data=[['xxxx','总裁办'，'13800000']]
          const data = res.map(obj => Object.values(obj))
          return { header, data }
        },
        // 导出excel
        async hExportExcel() {
          this.loading = true
          let query = Object.assign({},this.listQuery)
          if(!query.jobNumber){ delete query.jobNumber}
          let arr = await findUserTime(query)
          if(arr.code == '500') return
          if(arr.code != '1'){
            this.loading = false
            return this.$message.error(errmsg)
          }
          if(!arr.data.length) return this.$message.error('暂无数据')
          const { header, data } = this.transformDat(this.setSort(arr.data))
          import('@/vendor/Export2Excel').then(excel => {
            // excel表示导入的模块对象
            console.log(excel)
            excel.export_json_to_excel({
            header, // 表头 必填
            data, // 具体数据 必填
            filename: '正班出勤excel', // 文件名称
            autoWidth: true, // 宽度是否自适应
            bookType: 'xlsx' // 生成的文件类型
            })
          })
          this.loading = false
        },
        // 排序函数
        setSort(arr){
          let newArr = JSON.parse(JSON.stringify(arr))
          let arr1 = []
          newArr.forEach((item,index)=>{
            let obj = {
                index: index+1,
                workCenter: item.workCenter,
                sectionType: item.sectionType,
                userName: item.userName,
                jobNumber: item.jobNumber,
                day1: item.day1,
                day2: item.day2,
                day3: item.day3,
                day4: item.day4,
                day5: item.day5,
                day6: item.day6,
                day7: item.day7,
                day8: item.day8,
                day9: item.day9,
                day10: item.day10,
                day11: item.day11,
                day12: item.day12,
                day13: item.day13,
                day14: item.day14,
                day15: item.day15,
                day16: item.day16,
                day17: item.day17,
                day18: item.day18,
                day19: item.day19,
                day20: item.day20,
                day21: item.day21,
                day22: item.day22,
                day23: item.day23,
                day24: item.day24,
                day25: item.day25,
                day26: item.day26,
                day27: item.day27,
                day28: item.day28,
                day29: item.day29,
                day30: item.day30,
                day31: item.day31,
                timeSum: item.timeSum
            }
            arr1.push(obj)
          })
          return arr1
        },
    },
    // 进入页面获取table信息
    mounted() {
        this.handleFilter()
    }
}
</script>

<style>

</style>
